<template>
	<view :style="$theme.pageStyle">
		<image mode="aspectFill" class="topMainBg"
			src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/401689960760F1Zrte.png"></image>
		<view class="main">
			<view class="row position"
				:style="[statusBarHeight<40?{marginTop:2.5*statusBarHeight+'rpx'}:{marginTop:2.3*statusBarHeight+'rpx'}]">
				<view class="title">
					登录
				</view>
			</view>
			<view class="logoBorder">
				<u--image radius="25rpx" :src="app_logo" width="172rpx" height="172rpx"></u--image>
			</view>
			<view class="weChatName">
				{{app_name}}
			</view>
			<view class="weChatDes">
				登录后可使用完整功能
			</view>
			
			<view class="f__login">
				<view class="loginButton" v-if="!isPhoneLogin">
					<!-- #ifdef MP-WEIXIN -->
					<button class="button bg" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号快捷登录</button>
					<button class="button marginT bg" @click="login()">一键登录</button>
					<!-- #endif -->
					<button class="button cl bg bl" @click="Nologin" style="margin-top:24rpx;">
						暂不登录
					</button>
					
				</view>
				<!-- 验证码登录 -->
				<view class="loginPhone" v-if="isPhoneLogin">
					<view class="form-row">
						<input class="input" type="number" v-model="phone" placeholder="请输入手机号码"
							placeholder-style="font-weight:normal;color:#bbbbbb;" />
					</view>
					<view class="form-row">
						<input class="input" type="number" v-model="vCode" placeholder="请输入验证码"
							placeholder-style="font-weight:normal;color:#bbbbbb;" />
						<view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
					</view>
					<button class="submit bg" size="default" @click="onSubmit">确定</button>
				</view>
				<!-- #ifdef MP -->
				<!-- 快速登录和手机号登录切换 -->
				<view class="tips">
					<view @click="isPhoneLogin = !isPhoneLogin" class="goBuy cl">
						{{isPhoneLogin?'快速登录':'手机号登录'}}
					</view>
				</view>
				<!-- #endif -->
			
				<view style="margin-top: 20px;display: flex;line-height: 30px;font-size: 14px;">
					<checkbox-group @change="isAgree">
						<checkbox value="" :checked="isCheckAgreement" style="transform:scale(0.7);" />
					</checkbox-group>
					我已阅读并同意<span class="cl"
						@click="jumpPage('/pages/content/index?name=privacy')">《使用协议》</span>和<span
						class="cl"
						@click="jumpPage('/pages/content/index?name=service')">《用户协议》</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	import {
		useloginStore
	} from '@/store/login'
	import pinia from '@/store/index'
	const loginStore = useloginStore(pinia)
	export default {
		data() {
			return {
				nickname: '',
				statusBarHeight: 0,
				app_name: uni.getStorageSync('app_name'),
				app_logo: uni.getStorageSync('app_logo'),
				show: false,
				isSelectImage: false,
				title: '',
				desc: '',
				loadTitle: true,
				isagreeU: false,
				disabled: true,
				checked: false,
				isLoading: false,
				isPhoneLogin: false, //是否显示验证码登录
				isCheckAgreement: false, //是否显示验证码登录
				readonly: false,
				codeText: '获取验证码',
				phone: '',
				vCode: '',
				code: '',
			}
		},
		onLoad() {
			this.getStatusBarHeight()

		},
		methods: {
			isAgree() {
				if (this.isCheckAgreement) {
					this.isCheckAgreement = false
				} else {
					this.isCheckAgreement = true
				}
			},
			chech() {
				console.log(111)
				this.checked = true
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			backIndex() {
				uni.switchTab({
					url: '/pages/main/index/index'
				})
			},
			Nologin(){
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			jumpPage(e) {
				uni.navigateTo({
					url: e
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			getStatusBarHeight() {
				this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			},
			onChooseAvatar(e) {
				this.avatarUrl = e.detail.avatarUrl
				this.isSelectImage = true
			},
			getPhoneNumber(e) {
				if (!this.isCheckAgreement) {
					return uni.$u.toast('请先同意使用协议和用户协议')
				}
				if (e.detail.errMsg !== 'getPhoneNumber:ok') {
					return uni.showToast({
						icon: 'none',
						title: '拒绝手机号登录'
					});
				}
				let client_id = uni.getStorageSync('client_id');
				if (client_id) {
					this.client_id = client_id
				}
				console.log(client_id)
				$H.post('login/mnpPhoneLogin', {
					code: e.detail.code,
					client_id: this.client_id,
					invite_code: uni.getStorageSync("invite_code"),
					cid: uni.getStorageSync('cid')
				}, {
					token: false
				}).then(res => {
					if (res.code == 1) {
						uni.setStorageSync('token', res.data.token)
						let userInfo = res.data.userInfo;
						// 登录成功后绑定wss
						this.socketIo.send({
							type: "bindUid",
							user_id: userInfo.user_id,
							token: res.data.token
						});
						uni.setStorageSync('userInfo', userInfo);
						loginStore.login(userInfo);
						uni.showLoading()
						uni.reLaunch({
							url: '/pages/center/index'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			async login() {
			
				if (!this.isCheckAgreement) {
					return uni.$u.toast('请先同意使用协议和用户协议')
				}
				uni.showLoading({
					title: '请稍后...'
				})
				let client_id = uni.getStorageSync('client_id');
				if (client_id) {
					this.client_id = client_id
				}
				try {
					uni.login({
						success: (res) => {
							this.code = res.code;
							$H.post('login/mnpLogin', {
								code: this.code,
								client_id: this.client_id,
								invite_code: uni.getStorageSync("invite_code"),
								cid: uni.getStorageSync('cid')
							}, {
								token: false
							}).then(res => {
								if (res.code == 1) {
									uni.setStorageSync('token', res.data.token)
									let userInfo = res.data.userInfo;
									// 登录成功后绑定wss
									this.socketIo.send({
										type: "bindUid",
										user_id: userInfo.user_id,
										token: res.data.token
									});
									uni.setStorageSync('userInfo', userInfo);
									loginStore.login(userInfo);
									uni.reLaunch({
										url: '/pages/center/index'
									})
								} else {
									uni.$u.toast(res.msg)
								}
								uni.hideLoading()
							})
						},
					})
				} catch (error) {
					uni.hideLoading()
					uni.$u.toast(error)
				}
			},
			//获取验证码
			getVcode() {
				if (!this.isCheckAgreement) {
					return uni.$u.toast('请先同意使用协议和用户协议')
				}
				var that = this
				if (that.readonly) {
					uni.showToast({
						title: '验证码已发送~',
						icon: 'none'
					});
					return;
				}
				if (that.phone == '') {
					uni.showToast({
						title: '请输入手机号~',
						icon: 'none'
					});
					return;
				}
				const phoneRegular = /^1\d{10}$/;
				if (!phoneRegular.test(that.phone)) {
					uni.showToast({
						title: '手机号格式不正确~',
						icon: 'none'
					});
					return;
				}
				let httpData = {}
				$H.post('/sms/sendCode', {
					'mobile': that.phone,
					'scenes': 'YZMDL'
				}, {
					token: false
				}).then(res => {
					if (res.code == 1) {
						that.getCodeState();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			//验证码按钮文字状态
			getCodeState() {
				const _this = this;
				this.readonly = true;
				this.codeText = '60S后重新获取';
				var s = 60;
				clear = setInterval(() => {
					s--;
					_this.codeText = s + 'S后重新获取';
					if (s <= 0) {
						clearInterval(clear);
						_this.codeText = '获取验证码';
						_this.readonly = false;
					}
				}, 1000);
			},
			// 手机号登录
			onSubmit() {
				if (!this.isCheckAgreement) {
					return uni.$u.toast('请先同意使用协议和用户协议')
				}
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号~',
						icon: 'none'
					});
					return;
				}
				const phoneRegular = /^1\d{10}$/;
				if (!phoneRegular.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确~',
						icon: 'none'
					});
					return;
				}
				if (this.vCode == '') {
					uni.showToast({
						title: '请输入验证码~',
						icon: 'none'
					});
					return;
				}
				let httpData = {};
				let client_id = uni.getStorageSync('client_id');
				if (client_id) {
					this.client_id = client_id
				}
				$H.post('login/PhoneCodeLogin', {
					mobile: this.phone,
					code: this.vCode,
					client_id: this.client_id,
					invite_code: uni.getStorageSync("invite_code"),
					cid: uni.getStorageSync('cid')
				}, {
					token: false
				}).then(res => {
					if (res.code == 1) {
						uni.setStorageSync('token', res.data.token)
						let userInfo = res.data.userInfo;
						// 登录成功后绑定wss
						this.socketIo.send({
							type: "bindUid",
							user_id: userInfo.user_id,
							token: res.data.token
						});
						uni.setStorageSync('userInfo', userInfo);
						loginStore.login(userInfo);
						uni.showLoading()
						uni.reLaunch({
							url: '/pages/center/index'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #FFFFFF;
	}

	.bg{
		background: var(--color-primary);
	}
	
	.cl{
		color: var(--color-primary);
	}
	
	.bl{
		border:2rpx solid var(--color-primary);
	}

	.head {
		/* box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.15); */
		border-radius: 50%;
		/* width: 153rpx; */
		margin-top: 15rpx;
		/* height: 153rpx; */
		position: relative;
	}

	.photoBorder {
		z-index: 10;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 37.5rpx;
		height: 37.5rpx;
		text-align: center;
		border-radius: 50%;
		left: 72px;
		background: linear-gradient(0deg, #599EFF, #C399FF);
	}

	.photoIcon {
		width: 22rpx;
		height: 17rpx;
	}

	.dialog {
		width: 80vw;
		background-color: #ffffff;
		padding: 50rpx 32rpx;
		display: flex;
		border-radius: 18rpx;
		flex-direction: column;
		align-items: center;
		/* position: relative; */
	}

	.input-btn {
		width: 90%;
		margin: 0 auto;
		margin-top: 40px;
	}

	.dialogComitBtn {
		width: 320rpx;
		background: #3388FF;
		border-radius: 6rpx;
		font-size: 27rpx;
		height: 56rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		justify-content: center;
		color: white;
	}

	.closeImg {
		right: 0;
		width: 18rpx;
		height: 18rpx;
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.comitBtn {
		width: 45%;
		background: #3388FF;
		border-radius: 12rpx;
		font-size: 35rpx;
		font-weight: 500;
		padding: 25rpx;
		text-align: center;
		color: white;
	}

	.cancelBtn {
		width: 45%;
		margin-top: 27rpx;
		background: #ffffff;
		border-radius: 12rpx;
		font-size: 35rpx;
		font-weight: 500;
		text-align: center;
		padding: 25rpx;
		border: #494A4C solid 1.8rpx;
		color: #494A4C;
	}

	.btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 170rpx;
		width: 100%;
	}

	.weChatDes {
		font-size: 27rpx;
		color: #494A4C;
		width: 50%;
		text-align: center;
		line-height: 31rpx;
		margin-top: 16rpx;
	}

	.weChatName {
		font-size: 35rpx;
		font-weight: 700;
		color: #14171A;
		margin-top: 25rpx;
	}

	.topMainBg {
		width: 100%;
		height: 410rpx;
	}

	.main {
		position: absolute;
		width: 100%;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.row {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}

	.backImg {
		width: 16rpx;
		z-index: 999;
		height: 28rpx;
		margin-left: 18rpx;
	}

	.position {
		position: relative;
		width: 100%;
		height: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.title {
		position: absolute;
		top: 0;
		width: 100%;
		text-align: center;
		font-size: 35rpx;
		font-weight: 500;
		color: white
	}

	.logoBorder {
		border: #FFFFFF solid 5rpx;
		border-radius: 25rpx;
		width: max-content;
		margin-top: 190rpx;
	}

	.icon-agreement {
		width: 14px;
		height: 14px;
		border: 1px solid #007AFF;
		border-radius: 5px;
	}
	
	.loginLoading {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(255, 255, 255, .95);
		z-index: 999;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
		
	.logo {
		width: 90rpx;
		height: 90rpx;
		border-radius: 18rpx;
		overflow: hidden;
		
		.img {
			width: 90rpx;
			height: 90rpx;
		}
	}
		
	.title {
		font-size: 40rpx;
		font-weight: bold;
		margin-top: 24rpx;
	}
		
	.text {
		font-size: 24rpx;
		color: #666;
		margin-top: 16rpx;
	}
		
	.loginButton {
		margin-top: 56rpx;
		
		.button {
			color: #fff;
			width: 100%;
			height: 92rpx;
		}
		
		.marginT {
			margin-top: 24rpx;
		}
	}
		
	.tips {
		margin-top: 24rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		
		.left {
			display: flex;
			flex-direction: row;
		}
		
		.goBuy {
			font-size: 24rpx;
			/* margin-left: 16rpx; */
			background: none;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			padding: 0;
			margin: 0;
			color: var(--color-primary);
		}
	}
	
	.loginPhone {
		.form-row {
			position: relative;
			border-bottom: 1rpx solid #e8e8e8;
			line-height: 1;
			margin-top: 24rpx;
	
			.input {
				font-size: 34rpx;
				line-height: 102rpx;
				height: 94rpx;
				width: 100%;
				box-sizing: border-box;
				font-size: 30rpx;
				padding: 0;
				font-weight: bold;
			}
	
			.getvcode {
				font-size: 26rpx;
				height: 80rpx;
				color: #333;
				line-height: 80rpx;
				background: #eee;
				min-width: 188rpx;
				text-align: center;
				border-radius: 8rpx;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 0;
				z-index: 11;
	
				&.forhidden {
					background: #eee;
					color: #cccccc;
				}
			}
		}
	
		.submit {
			margin-top: 60rpx;
			color: #fff;
			width: 100%;
			border: none;
		}
	}
	
</style>